import {
  antPath
} from "leaflet-ant-path";
export default class Lmap {
  constructor(map) {
    this.map = map; // 地图实例
    this.marker = null; // 标注点
    this.polygon = null; // 面
    this.polyline = null; // 路径
    this.popup = null; // 弹窗
    this.circle = null; // 圆
  }
  setMarker(obj) {
    /**
     * 设置点标注，传入参数：obj对象
     * iconUrl：标注图标
     * LngLat: 数组类单个经纬度 ["118.060137", "36.380447"]
     * TypeIs: 标注点类别，做分类用
     * hasLabel: Boolean 是否需要加label
     * text: label text
     */
    this.marker = L.marker([obj.LngLat[1], obj.LngLat[0]], {
      icon: new L.DivIcon({
        className: "lmap-icon",
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        html: obj.TypeIs == 'gisMark' || obj.TypeIs == 'gisMarks' ?
          `<span class="iconfont icon-location" style="font-size:28px;color:${obj.color}"></span><span class="lmap-span" style="visibility:${obj.hasLabel ? "initial" : "hidden"};color:${obj.color}">
        ${ obj.text }</span>` :
          (obj.TypeIs == 'endPoint' ?
            `<span class="iconfont icon-workStage" style="font-size:36px;color:${obj.color}"></span><span class="lmap-span" style="visibility:${obj.hasLabel ? "initial" : "hidden"};color:${obj.color}">
        ${ obj.text }</span>` :
            (obj.TypeIs == 'gisLongMark' ?
              `<span class="iconfont icon-longStay" style="font-size:32px;color:${obj.color}"></span><span class="lmap-span" style="visibility:${obj.hasLabel ? "initial" : "hidden"};color:${obj.color}">
        ${ obj.text }</span>` :(obj.TypeIs == 'circleMark' ?
              `<img class="lmap-image" src="${obj.iconUrl}"/><span class="lmap-text" style="visibility:${obj.hasLabel ? "initial" : "hidden"};color:${obj.color}">
        ${ obj.text }</span>` :
              `<img class="lmap-image" src="${obj.iconUrl}"/><span class="lmap-span" style="visibility:${obj.hasLabel ? "initial" : "hidden"};color:${obj.color}">
        ${ obj.text }</span>`
            )))
      })
    }).addTo(this.map);

    this.marker.TypeIs = obj.TypeIs; // 设置marker类型
    // console.log(this.marker);
    return this.marker; // 返回marker点实例
  }

  setPolyLine(obj) {
    // 设置轨迹线
    /**
     * 传入参数 obj:对象
     * arr: 轨迹数组
     * color: 轨迹线颜色
     */
    let antPath = L.polyline.antPath;
    this.polyline = antPath(obj.arr, {
      paused: false, //暂停  初始化状态
      reverse: false, //方向反转
      delay: 3000, //延迟，数值越大效果越缓慢
      dashArray: [10, 20], //间隔样式
      weight: 5, //线宽
      opacity: 1, //透明度
      color: obj.color || "blue", //颜色
      pulseColor: "#FFFFFF" //块颜色
    });
    this.polyline.addTo(this.map);
    this.polyline.TypeIs = obj.TypeIs;

    return this.polyline;
  }

  setPolygon(obj) {
    // 设置区域
    /**
     * 传入参数: obj对象
     * ponitArr: 点集合
     * color: 围栏边界颜色 默认 'blue'
     * TypeIs: 标注点类别，做分类用
     * hasLabel: Boolean 是否需要加label
     * text: label text
     */
    this.polygon = L.polygon(obj.ponitArr, {
      color: obj.color || "blue",
      weight: 3,
      opacity: 0.8,
      fillColor: obj.color || "blue",
      fillOpacity: 0.25
    }).addTo(this.map);
    this.polygon.TypeIs = obj.TypeIs;

    if (obj.hasLabel) {
      let label = L.marker([obj.LngLat[1], obj.LngLat[0]], {
        icon: new L.DivIcon({
          className: "lmap-icon",
          html: `<span class="lmap-span" style="background: #fff;opacity:0.5;border:1px solid ${obj.color};color:${obj.color};">${obj.text}</span>`
        })
      }).addTo(this.map);
      label.TypeIs = obj.TypeIs;
    }

    return this.polygon; // 返回polygon 实例
  }

  setPopup(obj) {
    // 设置弹窗
    /**
     * 传入参数: obj对象
     * ponitArr: 点集合
     * color: 围栏边界颜色 默认 'blue'
     * TypeIs: 标注点类别，做分类用
     * isSingle: Boolean 是否清除别的弹窗
     * text: label text
     */
    this.popup = L.popup(obj.ponitArr, {
      color: obj.color || "blue",
      weight: 3,
      opacity: 1,
      closeButton: true,
      closeOnClick: true,

    }).addTo(this.map);
    this.popup.TypeIs = obj.TypeIs;
    return this.popup; // 返回popup 实例
  }


  setCircle(obj) {
    // 画圆
    /**
     * 传入参数: obj对象
     * ponitArr: 点集合
     * color: 围栏边界颜色 默认 'blue'
     * TypeIs: 标注点类别，做分类用
     * isSingle: Boolean 是否清除别的弹窗
     * text: label text
     */
    this.circle = L.circle([obj.LngLat[1], obj.LngLat[0]], {
      color: obj.color || "blue",
      weight: 3,
      opacity: 1,
      radius: obj.radius || 100
    }).addTo(this.map);
    let label = L.marker([obj.LngLat[1], obj.LngLat[0]], {
      icon: new L.DivIcon({
        className: "lmap-icon",
        html:  obj.TypeIs == 'gisCircle'?`<span class="lmap-text" style="visibility:${obj.isLabel ? 'initial' : 'hidden'}">${obj.text}</span>`:`<img class="lmap-image" src="${obj.iconUrl}"/><span class="lmap-span" style="visibility:${obj.hasLabel ? "initial" : "hidden"};color:${obj.color}">
        ${ obj.text }</span>`
      })
    }).addTo(this.map);
    this.circle.TypeIs = obj.TypeIs;
    return this.circle; // 返回circle 实例
  }

  removeMarkByType(type) {
    // 根据标注实例的type进行分类删除
    /**
     * 传入参数 type
     */
    let layers = this.map._layers;
    let layer = [];
    for (let o in layers) {
      layer.push(layers[o]);
    }
    layer.forEach(item => {
      if (item.TypeIs === type) {
        this.map.removeLayer(item);
      }
    });
  }
}
